<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-06 13:35:50
 * @LastEditTime: 2024-06-06 15:34:24
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 图层面板
 * @FilePath: \chu-meng\client\src\pages\Design\components\ViewBar\LayerArea.vue
 * Copyright 版权声明
-->
<template>
  <div class="modWrap" @contextmenu.prevent="openCustomMenu">
    <a-directory-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      :tree-data="treeData"
    >
    <template #title="{ key: treeKey, title }">
      <a-dropdown :trigger="['contextmenu']">
        <span>{{ title }}</span>
        <template #overlay>
          <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
            <a-menu-item key="CREATE_FOLDER">新建文件夹</a-menu-item>
            <a-menu-item key="CREATE_FILE">新建页面</a-menu-item>
            <a-menu-item key="DELETE">删除</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </a-directory-tree>
  </div>
</template>

<script setup>
// import {
//   RotateLeftOutlined,
//   RotateRightOutlined,
//   FilePptOutlined
// } from '@ant-design/icons-vue'
import { ref } from 'vue'
const expandedKeys = ref(['0-0', '0-1'])
const selectedKeys = ref([])
const treeData = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      {
        title: 'leaf 0-0',
        key: '0-0-0',
        isLeaf: true,
      },
      {
        title: 'leaf 0-1',
        key: '0-0-1',
        isLeaf: true,
      },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      {
        title: 'leaf 1-0',
        key: '0-1-0',
        isLeaf: true,
      },
      {
        title: 'leaf 1-1',
        key: '0-1-1',
        isLeaf: true,
      },
    ],
  },
]

// 点击右键上的按钮
const onContextMenuClick = (treeKey, menuKey) => {
  console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
}

// 右键自定义菜单
const openCustomMenu = (e) => {
  console.log(`🚀 ~ openCustomMenu ~ e:`, e)
}
</script>

<style lang="scss" scoped>
.modWrap{
  :deep(.ant-tree){
    .ant-tree-treenode .ant-tree-node-content-wrapper{
      display: flex;
      .ant-tree-title{
        flex: 1;
        > span{
          display: block;
          width: 100%;
        }
      }
    }
  }
}
</style>
